<template>
	<view class="bg-gray" style="height: 100vh;">
		<view class="row-between padding-horizontal " style="flex-wrap: wrap;">
			<view class="card" style="height: 500rpx; width: 48%; border-radius: 10rpx; padding: 0; overflow: hidden;margin-bottom: 30rpx;" v-for="(item) in utlis">
				<image :src="item.img" style="width: 100%; height: 50%;" mode=""></image>
				<view class="font-bold" style="margin: 20rpx auto;text-align: center;">
					{{item.title}}
				</view>
				<view class="font-color-grey" style="margin: 20rpx auto;text-align: center;font-size: 20rpx;">
					{{item.conter}}
				</view>
				<view v-if="item.enable" @click="goUtlis(item.path)" class="my_button" style="margin: 0 auto; margin-top: 50rpx;">
					{{item.button}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				utlis:[
					{
						img:'https://bkimg.cdn.bcebos.com/pic/86d6277f9e2f07082838ea48e36eaf99a9014c08546a?x-bce-process=image/resize,m_lfit,w_536,limit_1',
						title:'2048小游戏',
						conter:'测试一下你的脑袋瓜',
						enable:true,
						button:'立刻开玩',
						path:'/page_game/game_one/index'
					},
					// {
					// 	img:'https://img0.baidu.com/it/u=1779365489,3526870278&fm=253&fmt=auto&app=138&f=JPEG?w=333&h=500',
					// 	title:'扫雷',
					// 	conter:'测试一下你的脑袋瓜',
					// 	enable:true,
					// 	button:'立刻开玩',
					// 	path:'/page_game/game_two/index'
					// },
					{
						img:'static/three/ji2.jpg',
						title:'打只因',
						conter:'我是ikun',
						enable:true,
						button:'立刻开打',
						path:'/page_game/game_three/index'
					},
					
				]
			}
		},
		methods: {
			goUtlis(path){
				this.$link.goTo(path)
			}
		}
	}
</script>

<style scoped>
.my_button{
	width: 140rpx;
	height: 50rpx;
	line-height: 50rpx;
	color: #fff;
	font-size: 20rpx;
	text-align: center;
	border-radius: 100rpx;
	background-color: #424242;
}
</style>
